<template>
  <el-card>
    <el-form :inline="true" :model="search" class="mb-2">
      <el-form-item label="会员名">
        <el-input v-model="search.name" placeholder="会员名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="search.phone" placeholder="手机号" clearable />
      </el-form-item>
      <el-form-item label="发放时间">
        <el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="exportExcel">导出Excel</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="pagedData" border style="width: 100%">
      <el-table-column prop="grantId" label="发放ID" width="120" />
      <el-table-column prop="name" label="会员名" width="120" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="grantDate" label="发放时间" width="160" />
      <el-table-column prop="points" label="发放积分" width="100" />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <el-pagination
      class="mt-2"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredData.length"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      v-model:current-page="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import * as XLSX from 'xlsx'

const search = ref({
  name: '',
  phone: '',
  date: []
})
const page = ref(1)
const pageSize = ref(10)
const tableData = ref(
  Array.from({ length: 30 }, (_, i) => ({
    grantId: `P20240601${String(i + 1).padStart(3, '0')}`,
    name: `会员${i + 1}`,
    phone: `139${String(10000000 + i).padStart(8, '0')}`,
    grantDate: `2024-06-${String(1 + (i % 28)).padStart(2, '0')}`,
    points: 10 + i,
    type: ['签到', '活动', '补发'][i % 3],
    remark: i % 2 === 0 ? '' : '活动赠送'
  }))
)

const filteredData = computed(() => {
  let list = tableData.value
  if (search.value.name) {
    list = list.filter(item => item.name.includes(search.value.name))
  }
  // 其它筛选略
  return list
})
const pagedData = computed(() => {
  const start = (page.value - 1) * pageSize.value
  return filteredData.value.slice(start, start + pageSize.value)
})

function handleSizeChange(val: number) {
  pageSize.value = val
  page.value = 1
}
function handleCurrentChange(val: number) {
  page.value = val
}
function doSearch() {}
function resetSearch() {
  search.value = { name: '', phone: '', date: [] }
}
function exportExcel() {
  const ws = XLSX.utils.json_to_sheet(tableData.value)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '积分发放明细')
  XLSX.writeFile(wb, '积分发放明细报表.xlsx')
}
</script>

<style scoped>
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }
</style> 